<template>
  <view>
<!--    <ul class="list-group list-group-flush left-course">
      <li v-for="(item,index) in state.leftnav.slice(0, 3)" :key="index" class="list-group-item"><a :href="'/#/pages/goods/list?categoryId='+item.id+'&categoryName='+item.name+''">{{item.name}}</a>
        <div class="child_list">
            <a class="child-a" v-for="childitem in item.children">{{childitem.name}}</a>
        </div>
      </li>
    </ul>-->
    <ul class="list-group list-group-flush left-course">
      <li v-for="(item,index) in state.leftnav.slice(0, 3)" :key="index" class="list-group-item">
        <a @click="sheep.$router.go('/pages/goods/list', { id: item.id })">{{item.name}}</a>
        <div class="child_list">
            <a class="child-a" v-for="childitem in item.children">{{childitem.name}}</a>
        </div>
      </li>
      <li class="list-group-item"><a href="https://channels.weixin.qq.com/shop/b/hiGOzoTlXKkQO5d" target="_blank">图书</a></li>
    </ul>
	</view>
	</template>

<script setup>
  import {
    computed,
    reactive
  } from 'vue';
  import {
    onLoad,
    onReachBottom,
    onPullDownRefresh
  } from '@dcloudio/uni-app';
  import request from '@/sheep/request';
  import sheep from '@/sheep';
  const state = reactive({
    leftnav: [],
  });

  async function getCategoryList() {
    const {
      code,
      data
    } = await sheep.$api.category.list({
      id: 167,
    });
    if (code === 1) {
      state.leftnav = data.childrenshow;
    }
  }


  onLoad((options) => {
    getCategoryList();
  });

</script>

	<style type="" scoped>
    .nav-shop li{
      line-height: 80px;
    }
    .nav-shop a{
      color:#333333;
      font-size:18px;
    }
    .left-course{
      .list-group-item{
        line-height: 137px;
        a{
          color: black;
          text-decoration: none;
          font-size: 20px !important;
        }
      }
      .child_list{
        line-height: 23px;
      }
      .child_list a.child-a{
        font-size:14px !important;
        padding-right:20px;
        display: inline-block;
        color: #9F9F9F;
        line-height: 23px !important;
      }
      .active{
        a{
          color: #FFFFFF;
        }
      }
    }
	</style>